<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购货</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/purchase.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
{include file="html/Common/indexHeader"}
<div class="index_container">
    <!--轮播-->
    <div class="banner">
        <ul id="on"></ul>
        <div class="banner_list"></div>
    </div>
    <div class="content" v-cloak>
        <!--商品分类-->
        <div class="my_show_container">
            <div class="my_show_box">
                <!--商品分类-->
                <div class="categories_list_box" @mouseleave="closeClass()">
                    <div class="categories_left_box">
                        <div class="categories_list">
                            <div class="categories_list_title">
                                <div class="title_tag_bar"></div>
                                <div class="title_tag" @click="getTypeClassData('all')">
                                    <p>商品分类/categories</p>
                                </div>
                            </div>
                            <ul>
                                {volist name="list" id="vo"}
                                <li @click="getFirstTypeClassData($event)" id="{$vo.id}" onmousemove="changColor(this)">
                                    <a href="javascript:;" id="{$vo.id}" v-on:mouseenter="getBaseData($event)">
                                        <div class="list_title">
                                            <p>{$vo.name}/{$vo.name_english}</p>
                                        </div>
                                        <span class="list_arrow">
                                        <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                    </span>
                                    </a>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="product_num_box">
                            <div class="product_num_text">商品数量/Vegetables</div>
                            <div class="product_num_cont">
                                <div class="num_img" id="numReduce">
                                    <img src="/image/userweb/slicesImg/product-num-reduce.png" alt="">
                                </div>
                                <div class="product_num" id="num">1</div>
                                <div class="num_img" id="numAdd">
                                    <img src="/image/userweb/slicesImg/product-num-add.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="categories_content" v-show="type">
                        <div class="sub">
                            <dl v-for="item in items">
                                <dt>
                                    <a @click="getTypeClassData('type',item.id)">{{item.name}}/{{item.name_english}}</a>
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </dt>
                                <dd >
                                    <a v-for="vo in item.list" @click="getTypeClassData('small',vo.id)">{{vo.name}}/{{item.name_english}}</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="my_show_content">
                    <div class="shop_tag">
                        <ul id="myTab">
                            <li class="nav-tabs active">
                                <a href="">
                                    <div class="title_zh">报价单</div>
                                    <div class="title_en">quotation</div>
                                </a>
                            </li>
                        </ul>
                        <div class="tag_btn_box">
                            <div class="tag_btn" @click="loadHistoryPurchase()">
                                <div class="title_zh">历史报价单</div>
                                <div class="title_en">historical quotation</div>
                            </div>
                        </div>
                    </div>
                    <div class="my_show_area" v-loading="loading">
                        <div class="store_area" v-for="item in sds.data">
                            <div class="store_info_box">
                                <a :href="'/userweb/index/shopList.html?supplierId='+item.supplier_id">
                                    <div class="store_info_img">
                                        <img :src="url+item.supplier_image" alt="">
                                    </div>
                                    <div class="store_name_title">
                                        <div class="title_zh" v-text="item.supplier_name"></div>
                                    </div>
                                </a>
                            </div>
                            <div class="good_info_box" v-for="vl in item.goods" >
                                <a v-bind:href="product_img+vl.product_id">
                                    <div class="good_info_img">
                                       <img v-bind:src="url+vl.product_image"  alt="">
                                    </div>
                                    <div class="info_list">
                                        <div class="info_top">
                                            <div class="good_info_name">
                                                <div class="title_zh">{{vl.product_name}}</div>
                                            </div>
                                            <div class="info_tit_right">
                                                <div class="info_tit">
                                                    <div class="title_zh">总增值税</div>
                                                    <div class="title_en">total VAT</div>
                                                </div>
                                                <div class="info_price" v-if="vl.is_include_tax===1">
                                                    <em>￡<span></span></em>
                                                    <span>0.00</span>
                                                </div>
                                                <div class="info_price" v-else-if="vl.is_include_tax===0">
                                                    <em>￡<span v-html="toFixed(vl.tax)" ></span></em>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="info_bottom">
                                            <div class="spec_info">
                                                <div class="product_num">{{vl.specification}}</div>
                                                <div class="product_num_number">×1<!--{{sds.total}}--></div>
                                            </div>
                                            <div class="info_tit_right">
                                                <div class="info_tit">
                                                    <div class="title_zh">收取总额</div>
                                                    <div class="title_en">total charge</div>
                                                </div>
                                                <div class="info_price">
                                                    <em>￡</em>
                                                    <span v-html="toFixed(vl.price)"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <!--分页-->
                        <div class="pagination_box" v-html="html"></div>
                        <div id="noData"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}

</body>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script>
    $(function() {
        validToken(); //验证tonken.
        bannerInit();
        $("#purchase").addClass("active");
        $("#purchase").siblings().removeClass("active");
        $("#numReduce").click(function () {
            var num = $("#num").html();
            var newNum = parseInt(num)-1;
            if(num==1){
                $("#num").html(1);
            }else {
                $("#num").html(newNum);
            }
        })
        $("#numAdd").click(function () {
            var num = $("#num").html();
            var newNum = parseInt(num)+1;
            $("#num").html(newNum);
        })
    });

    var app = new Vue({
        el: ".index_container",
        data: {
            user_id:'',
            user_name:'',
            city:'',
            web_token:'',
            items: [],
            sds: [],
            page_no:2,
            searchs: {cate_id : '',type_id : '',small_type_id :'', page:1,num:''},
            lookIn: {pId : ''},
            html: '',
            tax:'',
            type:false,
            maxPage:'',
            product_img:"/userweb/index/productInfo.html?productId=",
            url:oss_url,
            nodata:'',
            loading:true
        },
        methods: {
            req: function () {
                var url = '__APP__/api/Purchase/getClass';
                this.$http.post(url,this.lookIn, {
                    emulateJSON: true
                }).then(function (res) {
                    // console.log(res);
                    this.items = res.body['data'];
                }, function (res) {

                });
            },
            atd: function(type){
                if (type == 'left'){
                    this.searchs.page = 1;
                }
                this.loading = true;
                this.searchs.num = $('#num').text();
                var url = '__APP__/api/Purchase/buyProduct';
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    if(0 == res.body['data'].data.length){
                        $('#noData').html(this.nodata);
                        this.html = '';
                        this.sds = '';
                        this.tax = '';
                    }else{
                        $('#noData').html("");
                        this.html = res.body['data'].html;
                        this.sds = res.body['data'];
                        this.tax = res.body['data'].tax;
                    }
                    this.loading = false;
                }, function (res) {

                });
            },
            getBaseData: function(event){
                this.lookIn.pId = event.currentTarget.id;
                this.type = true;
                this.req();
            },
            getTypeClassData: function(str,id){
                if('type' == str){
                    this.searchs.small_type_id = '';
                    this.searchs.cate_id = '';
                    this.searchs.type_id = id;
                }
                if('small' == str){
                    this.searchs.type_id = '';
                    this.searchs.cate_id = '';
                    this.searchs.small_type_id = id;
                }
                if ('all' == str){
                    this.searchs.type_id = '';
                    this.searchs.small_type_id = '';
                    this.searchs.cate_id = '';
                }
                this.searchs.num = '';
                this.type = false;
                this.atd('left');
            },
            getFirstTypeClassData:function(event){
                this.searchs.cate_id = event.currentTarget.id;
                this.searchs.type_id = '';
                this.searchs.small_type_id = '';
                this.searchs.num = '';
                this.type = false;
                this.atd('left');
            },
            upPage:function(){
                this.searchs.page--;
                if(this.searchs.page < 1){
                    this.searchs.page = 1;
                }
                this.req();
            },
            nextPage:function(){
                this.searchs.page++;
                if(this.searchs.page > this.maxPage){
                    this.searchs.page = this.maxPage;
                }
                this.req();
            },
            loadHistoryPurchase:function(){
                location.href="/userweb/index/historyPurchase.html";
            },
            closeClass:function(){
                this.type = false;
            },
            toFixed:function(num){
                if (Number(num)) {
                    var result = (num.toString()).indexOf(".");
                    if(result != -1) {
                        var res = Math.round(num*100)/100;
                    } else {
                        var res = num+'.00';
                    }
                } else {
                    var res = '0.00';
                }
                return res;
            }
        },
        mounted: function () {
            this.nodata += '<div class="my_no-data">';
            this.nodata += '<div class="no_data_tip">';
            this.nodata += '<img src="/image/userweb/slicesImg/no-data.png" alt="">';
            this.nodata += '<div class="no-data-text">';
            this.nodata += '<div class="title_zh">暂无数据</div>';
            this.nodata += '<div class="title_en">No data</div>';
            this.nodata += '</div>';
            this.nodata += '</div>';
            this.nodata += '</div>';
            this.user_id        = localStorage.getItem('user_id');
            this.user_name      = localStorage.getItem('user_name');
            this.city           = localStorage.getItem('city');
            this.web_token      = localStorage.getItem('web_token');
            if (!this.user_id ){
                location.href = "/userweb/index/login.html";
            }
            this.req();
            this.atd();
        }
    })
    function AjaxPage(page){
        app.searchs.page = page;
        app.atd();
    }

    function jump(){
        var page = $("#page_no").val();
        app.searchs.page = page;
        app.atd();
    }
    function changColor(_this) {
        $(_this).find('a').addClass('active');
        $(_this).siblings().find('a').removeClass('active');
        $(_this).find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow-change.png");
        $(_this).siblings().find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow.png");
    }
</script>
</html>